<template>
    <div>
        <div class="cont mb-4">
            <CustomQuery :form-columns="formColumns"></CustomQuery>
        </div>
        <div class="cont">
            <CustomTable selection :columns="columns" :data-source="data">
                <template #table-left-nav>
                    <a-button @click="useGo" type="primary" :icon="h(PlusOutlined)">添加代理</a-button>
                </template>
                <template #column-state="{column}">
                    <a-tag color="green">活跃</a-tag>
                </template>
                <template #column-action="{column}">
                    <a-button type="primary" :icon="h(EditOutlined)">编辑</a-button>
                </template>
            </CustomTable>
        </div>
    </div>
</template>

<script setup lang="ts">
import { EditOutlined , PlusOutlined} from "@ant-design/icons-vue";
import {h} from 'vue'

import CustomQuery from "@/components/customQuery/CustomQuery.vue";
import CustomTable from "@/components/customTable/CustomTable.vue";
import { CustomQueryColumns } from "@/components/customQuery/types";
import { CustomTableColumns, CUstomTableData } from "@/components/customTable/types";
const router = useRouter()

const useGo = () => {
    router.push('/user_management/agent/add')
}

const formColumns = reactive<CustomQueryColumns[]>([
    { label: "代理编码", type: "input", key: "code" },
    { label: "账号", type: "input", key: "accountNumber" },
    { label: "手机号", type: "input", key: "phone" },
    { label: "昵称", type: "input", key: "name" },
    {
        label: "状态",
        type: "select",
        key: "state",
        options: [
            { label: "状态: 全部", value: "1" },
            { label: "状态: 启用", value: "2" },
            { label: "状态: 禁用", value: "3" },
        ],
    },
]);

const data = reactive<CUstomTableData[]>([]);

const columns = reactive<CustomTableColumns[]>([
    {
        title: "编号",
        dataIndex: "code",
        key: "code",
    },
    {
        title: "账号",
        dataIndex: "accountNumber",
        key: "accountNumber",
    },
    {
        title: "手机号",
        dataIndex: "phone",
        key: "phone",
    },
    {
        title: "姓名",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "状态",
        dataIndex: "state",
        key: "state",
        bodyCell: 'state'
    },
    {
        title: "时间",
        dataIndex: "time",
        key: "time",
    },
    {
        flag: 'ACTION'
    },
]);

onMounted(() => {
    for (let i= 0; i < 100; i++){
    data.push(
        { name: "Tom", code: 18, accountNumber: '已经很棒了',phone: '13236774266', state: "1", time: '2024-08-15' },
    )
}
})
</script>

<style scoped></style>
